<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增食品</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <link rel="stylesheet" href="../global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
</head>
<style>
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 80%;
        background-color: #fff;
    }
</style>
<body>
<!--<div class="bg"></div>-->
<div id="app">
    <van-row>
        <van-col span="8">
            <van-button type="primary" @click="show = true">套餐查看</van-button>
            <van-overlay :show="show">
                <div class="wrapper" @click="show = false">
                    <div class="block">
                        <div>
                            <van-image width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                        </div>
                        <div class="p-3">
                            <p class="size4 bold">套餐A</p>
                            <p class="size1 color-ash">套餐描述 Nam id semper purus, sit amet scelerisqu
                                e justo. Proin in blandit ligula. Nulla auctor aliquet ipsum, pulvinar tempus dolor</p>
                            <p class="size2 bold border-top pt-3 mt-3">套餐内容</p>
                            <p class="p-2 bg-f9 border size1 mt-2">
                                米饭：1份.300g
                            </p>
                            <p class="p-2 bg-f9 border size1 mt-2">
                                牛肉：1份.250g
                            </p>
                        </div>
                    </div>
                </div>
            </van-overlay>
        </van-col>
    </van-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                show: false
            };
        },
        methods: {
            onClickLeft() {
                Toast('返回');
            },
        },
    });
</script>
</html>